﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="ShopOnline.CreateCard" MasterPageFile="~/GeneralMaster.master"
    Theme="ShopOnline" Title="Create Card" CodeBehind="CreateCard.aspx.cs" %>

<%@ Register Src="~/Controls/BusinessCard/StepFinish.ascx" TagName="StepFinish" TagPrefix="uc" %>
<%@ Register Src="~/Controls/BusinessCard/Card.ascx" TagName="Card" TagPrefix="uc" %>
<%@ Register Src="~/Controls/BusinessCard/BorderZone.ascx" TagName="BorderZone" TagPrefix="uc" %>
<%@ Register Src="~/Controls/BusinessCard/FontZone.ascx" TagName="FontZone" TagPrefix="uc" %>
<%@ Register Src="~/Controls/BusinessCard/CardInfoZone.ascx" TagName="CardInfoZone"
    TagPrefix="uc" %>
<asp:Content runat="server" ID="cHead" ContentPlaceHolderID="head">
    <script type="text/javascript" src="scripts/jColor/jscolor.js"></script>
    <script type="text/javascript" src="scripts/setTextColor.js"></script>
    <script type="text/javascript" src="scripts/fileuploader.js"></script>
    <script type="text/javascript" src="scripts/businessCard.js"></script>
    <script type="text/javascript" src="scripts/jquery.smartWizard-2.0.js"></script>
    <link href="css/BusinessCard.css" rel="stylesheet" type="text/css" />
    <link href="css/fileuploader.css" rel="stylesheet" type="text/css" />
    <link href="css/demo_style.css" rel="stylesheet" type="text/css" />
    <link href="css/smart_wizard.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content runat="server" ID="cCreateCard" ContentPlaceHolderID="ContentPlaceHolder1">
    <div class="content-box">
        <div class="border-bot">
            <div class="border-left">
                <div class="border-right">
                    <div class="left-top">
                        <div class="right-top">
                            <div class="left-bot">
                                <div class="right-bot">
                                    <div id="wizard" class="swMain">
                                        <ul>
                                            <li><a href="#step-1" class="selected">
                                                <label class="stepNumber">
                                                    1</label>
                                                <span class="stepDesc">Step 1<br />
                                                    <small>Choose Template</small> </span></a></li>
                                            <li><a href="#step-2">
                                                <label class="stepNumber">
                                                    2</label>
                                                <span class="stepDesc">Step 2<br />
                                                    <small>Front Side</small> </span></a></li>
                                            <li><a href="#step-3">
                                                <label class="stepNumber">
                                                    3</label>
                                                <span class="stepDesc">Step 3<br />
                                                    <small>Back Side</small> </span></a></li>
                                            <li><a href="#step-4">
                                                <label class="stepNumber">
                                                    4</label>
                                                <span class="stepDesc">Step 4<br />
                                                    <small>Finish</small> </span></a></li>
                                        </ul>
                                        <div id="step-1" class="cart-step">
                                            <div id="accordion">
                                                <h3>
                                                    <a href="#">Available Templates</a></h3>
                                                <div>
                                                    <div class="list-card list-card-template">
                                                        <asp:DataList runat="server" ID="dtlListTemplateCard" RepeatColumns="2" RepeatDirection="Vertical"
                                                            CellPadding="10" CellSpacing="10">
                                                            <ItemTemplate>
                                                                <uc:Card runat="server" ID="ucFrontCard" ReadOnly="true" CardID='<%# Eval("ID") %>'
                                                                    IsEmptyCard="false" />
                                                                <uc:Card runat="server" ID="ucBackCard" ReadOnly="true" CardID='<%# Eval("ID") %>'
                                                                    IsEmptyCard="false" IsViewBackCard="true" Display="false" />
                                                            </ItemTemplate>
                                                        </asp:DataList>
                                                    </div>
                                                </div>
                                                <h3><a href="#">My Templates</a></h3>
                                                <div>
                                                    <div class="list-card">
                                                        <asp:DataList runat="server" ID="dtlListCard" RepeatColumns="2" RepeatDirection="Vertical"
                                                            CellPadding="10" CellSpacing="10">
                                                            <ItemTemplate>
                                                                <uc:Card runat="server" ID="ucFrontCard" ReadOnly="true" CardID='<%# Eval("ID") %>'
                                                                    IsEmptyCard="false" />
                                                                <uc:Card runat="server" ID="ucBackCard" ReadOnly="true" CardID='<%# Eval("ID") %>'
                                                                    IsEmptyCard="false" IsViewBackCard="true" Display="false" />
                                                            </ItemTemplate>
                                                        </asp:DataList>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="height: 30px">
                                            </div>
                                            <div>
                                                <input type="checkbox" id="ckbBlankTemplate" />Use a blank template
                                            </div>
                                        </div>
                                        <div id="step-2" class="bc-step" style="display: none;">
                                            <div class="content-divider-left">
                                                <div class="content-divider-right">
                                                    <div class="full-width">
                                                        <div class="col-wrapper">
                                                            <div class="col-left sidebar">
                                                                <div class="block block-poll">
                                                                    <div class="sidebar-block">
                                                                        <div class="corners-top">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="border-left">
                                                                            <div class="border-right">
                                                                                <div class="block-title">
                                                                                    <strong><span>Border Type</span></strong>
                                                                                    <div class="block-content">
                                                                                        <uc:BorderZone runat="server" ID="ucFrontBorderZone" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="corners-bot">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="block block-poll">
                                                                    <div class="sidebar-block">
                                                                        <div class="corners-top">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="border-left">
                                                                            <div class="border-right">
                                                                                <div class="block-title">
                                                                                    <strong><span>Upload Logo</span></strong>
                                                                                    <div class="block-content">
                                                                                        <div id="logo-uploader">
                                                                                            <noscript>
                                                                                                <p>
                                                                                                    Please enable JavaScript to use file uploader.</p>
                                                                                                <!-- or put a simple form for upload here -->
                                                                                            </noscript>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="corners-bot">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-main-creditcard" style='padding-top: 5px'>
                                                                <table cellpadding="5" cellspacing="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" colspan="10">
                                                                            <div class="cardFactory" align="center">
                                                                                <div style='height: 100px'>
                                                                                </div>
                                                                                <uc:Card runat="server" ID="ucFrontCard" />
                                                                                <span class="aspect-ratio"></span>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="10" style="height: 20px">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="10" align="center">
                                                                            <div id="file-uploader">
                                                                                <noscript>
                                                                                    <p>
                                                                                        Please enable JavaScript to use file uploader.</p>
                                                                                    <!-- or put a simple form for upload here -->
                                                                                </noscript>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                            <br class="clear" />
                                                        </div>
                                                        <div class="col-right sidebar">
                                                            <div class="block block-cart">
                                                                <div class="sidebar-block">
                                                                    <div class="corners-top">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="border-left" align="center">
                                                                        <button type="submit" title="Add Text Block" class="button button-addtext" onclick="return false;">
                                                                            <span><span>Add Text Block</span></span></button><br /><br />
                                                                        <button type="submit" title="Remove Text Block" class="button button-removetext"
                                                                            onclick="return false;">
                                                                            <span><span>Remove Text Block</span></span></button>
                                                                    </div>
                                                                    <div class="corners-bot">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="block block-cart">
                                                                <div class="sidebar-block">
                                                                    <div class="corners-top">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="border-left">
                                                                        <div class="border-right">
                                                                            <div class="block-title">
                                                                                <strong><span>Font</span></strong>
                                                                            </div>
                                                                            <div class="block-content">
                                                                                <uc:FontZone runat="server" ID="ucFontZone" />
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="corners-bot">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <br class="clear" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="step-3" class="bc-step" style="display: none;">
                                            <div class="content-divider-left">
                                                <div class="content-divider-right">
                                                    <div class="full-width">
                                                        <div class="col-wrapper">
                                                            <div class="col-left sidebar">
                                                                <div class="block block-poll">
                                                                    <div class="sidebar-block">
                                                                        <div class="corners-top">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="border-left">
                                                                            <div class="border-right">
                                                                                <div class="block-title">
                                                                                    <strong><span>Border Type</span></strong>
                                                                                    <div class="block-content">
                                                                                        <uc:BorderZone runat="server" ID="ucBackBorderZone" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="corners-bot">
                                                                            <div>
                                                                                <div>
                                                                                    &nbsp;</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-main-creditcard" style='padding-top: 5px'>
                                                                <table cellpadding="5" cellspacing="0" width="100%">
                                                                    <tr>
                                                                        <td align="center" colspan="10">
                                                                            <div class="cardFactory" align="center">
                                                                                <div style='height: 100px'>
                                                                                </div>
                                                                                <uc:Card runat="server" ID="ucBackCard" IsViewBackCard="true" />
                                                                                <span class="aspect-ratio"></span>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td colspan="10" align="center">
                                                                            <div id="file-uploader-backcard">
                                                                                <noscript>
                                                                                    <p>
                                                                                        Please enable JavaScript to use file uploader.</p>
                                                                                    <!-- or put a simple form for upload here -->
                                                                                </noscript>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                            <br class="clear" />
                                                        </div>
                                                        <div class="col-right sidebar">
                                                            <div class="block block-cart">
                                                                <div class="sidebar-block">
                                                                    <div class="corners-top">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="border-left" align="center">
                                                                        <button type="submit" title="Add Text Block" class="button button-addtext" onclick="return false;">
                                                                            <span><span>Add Text Block</span></span></button><br /><br />
                                                                        <button type="submit" title="Remove Text Block" class="button button-removetext"
                                                                            onclick="return false;">
                                                                            <span><span>Remove Text Block</span></span></button>
                                                                    </div>
                                                                    <div class="corners-bot">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="block block-cart">
                                                                <div class="sidebar-block">
                                                                    <div class="corners-top">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="border-left">
                                                                        <div class="border-right">
                                                                            <div class="block-title">
                                                                                <strong><span>Font</span></strong>
                                                                            </div>
                                                                            <div class="block-content">
                                                                                <uc:FontZone runat="server" ID="ucBackFontZone" />
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="corners-bot">
                                                                        <div>
                                                                            <div>
                                                                                &nbsp;</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <br class="clear" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="step-4" class="bc-step" style="display: none;">
                                            <uc:StepFinish runat="server" ID="ucStepFinish" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</asp:Content>
